<template>
  <avue-crud ref="crud"
             :data="data"
             v-model="form"
             @row-save="rowSave"
             :before-open="beforeOpen"
             :before-close="beforeClose"
             :option="option">
    <template #menu-form="{row,index}">
      <el-button type="primary"
                 icon="el-icon-check"
                 plain
                 v-if="type=='add'"
                 @click="handleNext(row,index)">继续添加</el-button>
    </template>
  </avue-crud>

</template>
<script>
export default {
  data () {
    return {
      form: {},
      flag: false,
      type: '',
      data: [],
      option: {
        align: 'center',
        menuAlign: 'center',
        viewBtn: true,
        column: [
          {
            label: '姓名',
            prop: 'name'
          }, {
            label: '性别',
            prop: 'sex'
          }
        ]
      },
    };
  },
  methods: {
    handleNext (row, index) {
      this.flag = true;
      this.$refs.crud.rowSave()
    },
    rowSave (form, done, loading) {
      this.data.push(this.deepClone(this.form))
      this.$message.success(JSON.stringify(this.form))
      if (this.flag) {
        this.flag = false;
        loading()
        this.form.name = "";
        this.form.sex = "";
        return
      }
      done()
    },
    beforeClose (done) {
      this.flag = false;
      done()
    },
    beforeOpen (done, type) {
      this.type = type;
      done()

    }
  }
};
</script>